/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/megamenu-mobile-button/style.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
.wp-block-megamenu-mobile-button {
  height: 48px;
  width: 48px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  border: none;
  margin-right: 12px;
  margin-right: 12px;
  background: var(--wp--preset--color--primary-100);
  border-radius: 1rem;
}
@media (width > 1020px) {
  .wp-block-megamenu-mobile-button {
    display: none;
  }
}
.wp-block-megamenu-mobile-button span {
  display: block;
  position: absolute;
  height: 3px;
  width: 70%;
  background: var(--wp--preset--color--primary-800);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.wp-block-megamenu-mobile-button span {
  width: 35%;
}
.wp-block-megamenu-mobile-button span:nth-child(1) {
  top: 35%;
  left: 50%;
  transform-origin: left center;
  transform: translate(-50%, -30%);
}
.wp-block-megamenu-mobile-button span:nth-child(2) {
  top: 50%;
  left: 50%;
  transform-origin: left center;
  transform: translate(-50%, -50%);
}
.wp-block-megamenu-mobile-button span:nth-child(3) {
  top: 65%;
  left: 50%;
  transform-origin: left center;
  transform: translate(-50%, -70%);
}
.wp-block-megamenu-mobile-button.open span:nth-child(1) {
  transform: rotate(45deg) translate(-50%, -50%);
  top: 50%;
  width: 40%;
  left: 50%;
}
.wp-block-megamenu-mobile-button.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
.wp-block-megamenu-mobile-button.open span:nth-child(3) {
  transform: rotate(-45deg) translate(-50%, -50%);
  top: 50%;
  width: 40%;
  left: 55%;
}

/*# sourceMappingURL=style-index.css.map*/